iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
Modern Web

前端日常,每天 React 一下系列 第 14

【Day13】型別檢查 PropTypes

  • 分享至 

  • xImage
  •  

在 React 中,可以使用 React 配套插件
propTypes 來檢查型別。

PropTypes 主要功能

  • 定義 component prop 的型別
  • 檢查 component 的 prop 型別是否正確(僅在 React development 模式下執行),如果型別不正確,會在 console 丟出警告

安裝指令

npm install --save prop-types

使用方式

從元件外部導入

引入 PropTypes 之後
就可以從已宣告的 component 上
直接使用 propTypes 屬性

import PropTypes from 'prop-type';

class App extends React.Component{
	render(){
		return(){
			<h1>姓名:{this.props.name}</h1>
			<h1>年紀:{this.props.age}</h1>
		}
	}
}

App.propTypes = {
	name: PropTypes.string,
	age: PropTypes.number,
}

在元件內部使用

也可以在 class component 裡
用 static 方式宣告

import PropTypes from 'prop-type';

class App extends React.Component{
	static propTypes = {
		name: PropTypes.string
	}
	
	render(){
		return(){
			<h1>{ this.props.name}</h1>
		}
	}
}

使用 PropTypes 物件注意事項

  • 每個 key 都要對應到 prop 包含的屬性名稱
  • 每個 value 則定義 component prop 的型別,通常使用 PropTypes 本身提供的函式(如 PropTypes.stringPropTypes.number 等)
  • PropTypes 提供的型別函式,本質上是一個 validator function,會使用型別檢查器來檢查 component props 的型別
  • PropTypes 也可以使用 isRequired 屬性,用來定義是否必須提供某個 prop

isRequired 範例:

App.propTypes = {
	email: PropTypes.string.isRequired,
	password: PropTypes.string.isRequired,
	age: PropTypes.number,
}

參考資料


上一篇
【Day12】插槽 Portals
下一篇
【Day14】樣式 Style
系列文
前端日常,每天 React 一下30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言